<template>
  <view class="home-box">
    <!-- easycom 的特性, 直接使用组件名即可 -->
    <!-- 搜索区域 -->
    <search></search>

    <!-- 轮播图区域 -->
    <view class="swiper-box">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        indicator-active-color="#EA4350"
        indicator-color="rgba(0,0,0,0.4)"
      >
        <swiper-item v-for="item in swiperList" :key="item.goods_id">
          <navigator :url="item.navigator_url" class="swiper-item">
            <image :src="item.image_src" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航区域 -->
    <view class="nav-box">
      <!-- 需求: 有 navigator_url 属性的就渲染 navigator 组件, 否则就渲染 image 组件 -->
      <!-- template 是不会渲染任何元素的, 只是用来包裹元素的虚拟节点 -->
      <!-- 
        v-for 和 v-if 能不能用在同一个元素上? 为什么?
        不建议, v-for 的优先级比 v-if 更高 (Vue2), vue3 修复了, 反过来了, v-if 的优先级更高
        在 vue2 中的解决方案就是在外面包裹一个 template 使用 v-for 循环, 内部进行 v-if 判断条件渲染
        template 使用时的注意事项: 它是一个虚拟节点, 意味着不能设置 :key 属性, 所以需要将 key 设置在子元素身上
       -->
      <template v-for="item in navList">
        <navigator
          v-if="item.navigator_url"
          :key="item.image_src"
          :url="item.navigator_url"
        >
          <image :src="item.image_src" mode="widthFix" />
        </navigator>
        <!-- ------------------------------ -->
        <image
          v-else
          :key="item.image_src"
          :src="item.image_src"
          mode="widthFix"
        />
      </template>
    </view>

    <!-- 楼层区域 -->
    <view class="m-floor">
      <view v-for="item in floorList" :key="item.floor_title.image_src" class="floor">
        <view class="floor-title">
          <image
            :src="item.floor_title.image_src"
            mode="widthFix"
          />
        </view>
        <view class="product-list">
          <navigator v-for="prod in item.product_list" :key="prod.image_src" :url="prod.navigator_url" :open-type="prod.open_type" hover-class="none">
            <image
              :src="prod.image_src"
              mode="heightFix"
            />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Home",

  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperList: [],
      navList: [],
      floorList: []
    };
  },

  onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList()
  },

  methods: {
    async getFloorList() {
      const { message } = await uni.$u.http.get("/home/floordata");
      this.floorList = message
    },
    async getNavList() {
      const { message } = await uni.$u.http.get("/home/catitems");
      // console.log(message)
      this.navList = message;
    },
    async getSwiperList() {
      // uni 原生的请求方法, 添加拦截器不是很方便
      // const res = await uni.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' })
      // console.log(res)

      // uview 提供的请求库, 使用方法和 axios 一毛一样
      const { message } = await uni.$u.http.get("/home/swiperdata");
      // console.log(res)
      this.swiperList = message;
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 340rpx;
}
.swiper-item {
  display: block;
  height: 100%;
  line-height: 300rpx;
  text-align: center;
}
.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}
.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}
.info {
  position: absolute;
  right: 20rpx;
}
.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
.swiper {
  image {
    width: 100%;
    height: 100%;
  }
}
.nav-box {
  display: flex;
  justify-content: space-evenly;
  margin: 20rpx 0 40rpx;
  image {
    width: 140rpx;
  }
}

.floor-title {
  image {
    width: 750rpx;
  }
}
.product-list {
  navigator {
    float: left;
    margin-left: 12rpx;
    margin-bottom: 10rpx;
    image {
      height: 188rpx;
    }
    &:nth-child(1) {
      image {
        height: 386rpx;
      }
    }
  }
}
</style>